<template>
    <el-container class="scoreRadarNTrainChoose">
      <!--车辆关键系统评分雷达图-->
      <el-aside style="width: 336px; margin: 0;">
        <!--当前选择车辆及分数-->
        <div class="trainCurrent" v-model="trainData">
          <span style="font-size: 15px;margin-top: 7px;color: #aaa">
            车辆{{trainData[lineSelected].trains[trainIdSelected].trainNum}}:
          </span>
          <span ref="scoreColor4CurrentTrain" style="font-size: 20px">
            {{trainData[lineSelected].trains[trainIdSelected].score}}分
          </span>
        </div>
        <!--雷达图-->
        <div id="scoreRadarPic" style="width: 330px; height: 230px; margin: auto;"></div>
      </el-aside>

      <!--分隔线-->
      <el-divider direction="vertical"></el-divider>

      <el-main style="width: 1343px; height: 267px; padding: 0 0 0 9px; background-color: #13192C;">
        <!--线路选择器-->
        <div id="lineSelector" style="padding-top: 20px">
          <span style="margin-left: 16px; margin-top: 29px; font-size: 14px; color: #888;">线路</span>
          <el-select :value="linePreSelect" @change="changeLine" style="margin-left: 12px;">
            <el-option
              v-for="line in trainData"
              :key="line.id"
              :label="line.line"
              :value="line.id">
            </el-option>
          </el-select>
        </div>
        <!--车辆选择矩阵-->
        <div v-for="line in trainData"
             :key="line.id"
             :class="{notCurrentLine: linePreSelect !== line.id}">
          <train-node v-for="train in line.trains"
                      :key="train.id"
                      :score="train.score"
                      :train="train.trainNum"
                      :train-id="train.id">

          </train-node>
        </div>
      </el-main>
    </el-container>
</template>

<script>
import * as echarts from 'echarts';
import { mapState, mapMutations, mapActions } from 'vuex';

import TrainNode from "./comp/TrainNode";
import axios from "axios";

export default {
  name: "ScoreRadar",
  props: {

  },
  data() {
    return {
      colors: {
        green: {
          score: 'rgba(27, 185, 52, 1)',
          line: 'rgba(27, 185, 52, 1)',
          area: 'rgba(27, 185, 52, 0.6)',
          point: '#9FFFD6',
        },
        yellow: {
          score: 'rgba(247, 152, 28, 1)',
          line: 'rgba(255, 158, 31, 1)',
          area: 'rgba(255, 158, 31, 0.6)',
          point: 'rgba(255, 224, 184, 1)',
        },
        red: {
          score: 'rgba(235, 43, 51, 1)',
          line: 'rgba(235, 43, 51, 1)',
          area: 'rgba(235, 43, 51, 0.6)',
          point: 'rgba(255, 114, 120, 1)',
        },
      },
      picOption: {
        // 修改得分线的颜色
        // color: ['#1BB934'],
        // 图的标题
        // title: {
        //   text: 'Customized Radar Chart'
        // },
        legend: {},
        radar: {
          indicator: [
            { text: '制动系统', max: 100 },
            { text: '走行部', max: 100 },
            { text: '控制系统', max: 100 },
            { text: '牵引系统', max: 100 },
            { text: '辅助系统', max: 100 },
            { text: '弓网系统', max: 100 },
          ],
          center: ['50%', '50%'],
          radius: 90,
          startAngle: 60,
          splitNumber: 4,
          shape: 'circle',
          axisName: {
            formatter: '{value}',
            color: '#888',
          },
          splitArea: {
            areaStyle: {
              color: ['rgba(255, 255, 255, 0.8)', 'rgba(255, 255, 255, 0.6)', 'rgba(255, 255, 255, 0.4)', 'rgba(255, 255, 255, 0.2)'],
              // shadowColor: 'rgba(0, 0, 0, 0.2)',
              // shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 155, 155, 0.8)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0)'
            }
          }
        },
        series: {
          type: 'radar',
          emphasis: {
            lineStyle: {
              width: 4
            }
          },
          // 这里data若不为数组，将会报错，并且不会生成图像
          data: [{
            value: [100, 70, 80, 90, 90, 80],
            // name: 'Data A',
            areaStyle: {
              color: 'rgba(27, 185, 52, 0.6)' // 区域颜色
            }
          }],
          lineStyle: {
            color: 'rgba(27, 185, 52, 1)' // 连线颜色
          },
          itemStyle: {
            color: '#9FFFD6' // 拐点颜色
          },
          symbol: 'circle', // 拐点为圆形
          symbolSize: 6,  // 拐点大小
        },
      },
    }
  },
  components: {
    'train-node': TrainNode
  },
  methods: {
    drawRadarPic() {
      // console.log('drawRadarPic被调用')
      // console.log("第一处changRadarColor");
      this.changeRadarColor();
      // console.log("lineSelected: "+this.lineSelected);
      // console.log("trainIdSelected: "+this.trainIdSelected);
      // console.log(this.trainData[this.lineSelected].trains[this.trainIdSelected]);
      this.picOption.series.data[0].value
          = this.trainData[this.lineSelected].trains[this.trainIdSelected].scores4systems;

      // console.log("当前图像数据：" + this.picOption.series.data[0].value);
      this.radarPic.setOption(this.picOption);
    },
    changeLine(lineId) {
      this.$store.commit('healthManage_trainScore/changeLine', lineId);
    },
    changeRadarColor() {
      // console.log('changeRadarColor被调用')
      let currentScore = this.trainData[this.lineSelected].trains[this.trainIdSelected].score;
      // console.log('changeRadarColor中的currentScore:',currentScore)
      if(currentScore < 60) {
        this.$refs.scoreColor4CurrentTrain.style.color = this.colors.red.score;
        this.picOption.series.data[0].areaStyle.color = this.colors.red.area;
        this.picOption.series.lineStyle.color = this.colors.red.line;
        this.picOption.series.itemStyle.color = this.colors.red.point;
      } else if (60 <= currentScore && currentScore <= 80) {
        this.$refs.scoreColor4CurrentTrain.style.color = this.colors.yellow.score;
        this.picOption.series.data[0].areaStyle.color = this.colors.yellow.area;
        this.picOption.series.lineStyle.color = this.colors.yellow.line;
        this.picOption.series.itemStyle.color = this.colors.yellow.point;
      } else if (80 <= currentScore ) {
        this.$refs.scoreColor4CurrentTrain.style.color = this.colors.green.score;
        this.picOption.series.data[0].areaStyle.color = this.colors.green.area;
        this.picOption.series.lineStyle.color = this.colors.green.line;
        this.picOption.series.itemStyle.color = this.colors.green.point;
      }
    }
  },
  mounted() {
    // this.$store.dispatch('getTrainBaseData');
    // // this.$store.dispatch('getTrainScore');
    //
    // this.changeRadarColor();
    // this.radarPic = echarts.init(document.getElementById("scoreRadarPic"));
    // this.radarPic.setOption(this.picOption);

    // let that = this;
    //
    // axios.get('/healthManage/trainBaseData')
    //     .then(res => {
    //       console.log('请求车辆数据成功，返回数据为:');
    //       console.log(res.data.result.info);
    //       that.$store.commit('changeTrainData', res.data.result.info);
    //       that.$store.dispatch('changeTrain', 0);
    //       console.log('当前vuex中的trainData')
    //       console.log(that.$store.state.trainData);
    //
    //       that.changeRadarColor();
    //       that.radarPic = echarts.init(document.getElementById("scoreRadarPic"));
    //       that.radarPic.setOption(that.picOption);
    //     }).catch(err => {
    //   console.log(err);
    // });

    // console.log('trainData 1:', this.trainData);

    this.$store.dispatch('healthManage_trainScore/getTrainBaseData').then(() => {
      // console.log("第2处changRadarColor");
      // console.log('trainData 2:', this.trainData);
      this.changeRadarColor();
      this.radarPic = echarts.init(document.getElementById("scoreRadarPic"));
      this.radarPic.setOption(this.picOption);
    });


  },
  computed: {
    // ...mapState(['trainIdSelected', 'lineSelected', 'linePreSelect', 'trainData', 'trainNameSelected'])
    ...mapState({
      trainIdSelected: state => state.healthManage_trainScore.trainIdSelected,
      lineSelected: state => state.healthManage_trainScore.lineSelected,
      linePreSelect: state => state.healthManage_trainScore.linePreSelect,
      trainData: state => state.healthManage_trainScore.trainData,
      trainNameSelected: state => state.healthManage_trainScore.trainNameSelected
    })
  },
  watch: {
    // trainIdSelected: function () {
    //   // console.log("trainIdSelected-watch");
    //   this.drawRadarPic();
    // },
    // lineSelected: function () {
    //   // console.log("LineSelected-watch");
    //   this.drawRadarPic();
    // }
    trainNameSelected: function () {
      this.drawRadarPic();
    }
  }
}
</script>

<style scoped>
.scoreRadarNTrainChoose {
  background-color: #13192C;
}
.greenScore {
  color: #1BB934;
}
.yellowScore {
  color: #F7981C;
}
.redScore {
  color: #EB2B33;
}
.scoreRadarNTrainChoose>.el-divider--vertical{
  margin: auto 0;
  height: 223px;
  background-color: #1C284B;
}
.trainCurrent {
  width: 183px;
  height: 30px;
  text-align: center;
  margin: 0 auto;
  border-bottom-left-radius: 3em;
  border-bottom-right-radius: 3em;
  background-color: #1A223C;
}
#lineSelector>>>.el-input .el-input__inner{
  width: 140px;
  height: 32px;
  background-color: #171F37;
  border: 1px solid #1D3A7F;
  border-radius: 2px;
}
/*.el-select-dropdown {*/
/*  background-color: aqua!important;*/
/*}*/
.notCurrentLine {
  display: none;
}
</style>
